<template>
    <aside class="product-aside">
        <div class="scroll-box">
            <!-- 我的收藏 -->
            <dl>
                <dt :class="{ active: query.type == 'collect' }">
                    <a href="?type=collect" @click="setQuery($event, { type: 'collect' })">My favorites</a>
                </dt>
            </dl>

            <!-- 最新 -->
            <dl v-if="newArrivals > 0">
                <dt :class="{ active: query.type == 'new' }">
                    <a href="?type=new" @click="setQuery($event, { type: 'new' })">New arrivals</a>
                </dt>
            </dl>
            <!-- 分类列表 -->
            <dl class="product-switch" v-for="group in classData" :key="group.classify_id" :class="{hide: classOpen != group,active: getClassifyActive(group)}" :style="{ height: (group.child.length + 1) * 32 + 'px' }">
                <dt>
                    <a :href="getLinkHref({ classify: group.classify_id })" @click="classOpen = group;setQuery($event, { classify: group.classify_id });" v-text="group.name"></a>
                    <i class="iconfont icon-xia" @click="classOpen = classOpen == group ? null : group"></i>
                </dt>
                <dd v-for="classify in group.child" :key="classify.classify_id" :class="{ active: classify.classify_id == query.classify }">
                    <a :href="getLinkHref({ classify: classify.classify_id })" @click="setQuery($event, { classify: classify.classify_id })" v-text="classify.name"></a>
                </dd>
            </dl>

            <!-- <p>
                <span>Filter by</span>
                <button v-show="
                        query.surface.length +
                            query.brands.length +
                            query.sizes.length >
                        0
                    " @click="clearAll()">
                    Clear all
                </button>
            </p> -->

            <!-- 打印面 -->
            <dl class="product-checkbox">
                <dt>Print areas</dt>
                <dd v-for="item in printList" :key="item.value" :class="{ active: query.surface.indexOf(item.value) >= 0 }">
                    <em><svg-icon name="checkbox-active" /></em>
                    <a :href="getLinkHref({ surface: item.value })" @click="setQuery($event, { surface: item.value })" v-text="item.label"></a>
                </dd>
            </dl>

            <!-- 尺码 -->
            <dl class="product-checkbox">
                <dt>Sizes</dt>
                <dd v-for="item in sizeList" :key="item.value" :class="{ active: query.sizes.indexOf(item.value) >= 0 }">
                    <em><svg-icon name="checkbox-active" /></em>
                    <a :href="getLinkHref({ sizes: item.value })" @click="setQuery($event, { sizes: item.value })" v-text="item.label"></a>
                </dd>
            </dl>

            <!-- 品牌 -->
            <!-- <dl class="product-checkbox">
                <dt>Brands</dt>
                <dd v-for="item in brandList" :key="item.value" :class="{ active: query.brands.indexOf(item.value) >= 0 }">
                    <i class="iconfont icon-gougou"></i>
                    <a :href="getLinkHref({ brands: item.value })" @click="setQuery($event, { brands: item.value })" v-text="item.label"></a>
                </dd>
            </dl> -->
        </div>
    </aside>
</template>

<script>
const size_option = [
    // { value: "M01", label: "XXS" },
    { value: "M02", label: "XS" },
    { value: "M03", label: "S" },
    { value: "M04", label: "M" },
    { value: "M05", label: "L" },
    { value: "M06", label: "XL" },
    { value: "M07", label: "2XL" },
    { value: "M08", label: "3XL" },
    { value: "M09", label: "4XL" },
    { value: "M10", label: "5XL" },
];

import { mapGetters } from "vuex";

export default {
    name: "product-menu",
    props: {
        query: { type: Object },
        brandList: { type: Array, default: () => [] },
    },
    data () {
        return {
            printList: [
                { value: "front-side", label: "Front" },
                { value: "back-side", label: "Back" },
                { value: "sleeve-left", label: "Left sleeve" },
                { value: "sleeve-right", label: "Right sleeve" },
                // { value: "neck-label-outer", label: "Outside neck label" },
                { value: "neck-label-inner", label: "Inside neck label" },
            ],
            sizeList: size_option,
            classOpen: null,
        };
    },
    computed: {
        ...mapGetters("common", {
            classData: "getProductClassify",
            newArrivals: 'getNewArrivals',
            // 品牌功能暂时注释掉了
            // brandList: "getProductBrand",
        }),
    },
    watch: {
        query: {
            handler: function (v) {
                let classify = v.classify || null;
                //通过query打开分类
                this.setClassOpenByClassify(classify)
            }, immediate: true
        }
    },
    methods: {
        //
        setClassOpenByClassify (classify) {
            if (!classify) { return }
            let classData = this.classData || []
            let classify_id = parseInt(classify / 100) * 100;
            this.classOpen = classData.filter(item => classify_id == item.classify_id)[0] || null;
        },

        setQuery (event, option) {
            event.preventDefault();
            let query = JSON.parse(JSON.stringify(this.query));
            if (option.type) {
                // 最新、最爱，需要清空classify
                query.type = option.type;
                query.classify = 0;
                query.brands = [];
                query.surface = [];
                query.sizes = [];
                query.page = 1;
                query.sort = 1;

                this.classOpen = null;
                this.$emit("queryChange", query);
            } else if (option.classify) {
                // 切换分类
                query.type = "";
                query.classify = option.classify;
                query.page = 1;
                this.$emit("queryChange", query);
            } else if (option.surface) {
                // 设计面
                let surface = [...this.query.surface];
                let index = surface.indexOf(option.surface);
                if (index < 0) {
                    surface.push(option.surface);
                } else {
                    surface.splice(index, 1);
                }

                query.type = "";
                query.surface = this.printList
                    .filter((item) => surface.indexOf(item.value) >= 0)
                    .map((i) => i.value);
                query.page = 1;
                this.$emit("queryChange", query);
            } else if (option.sizes) {
                // 尺码表
                let sizes = [...this.query.sizes];
                let index = sizes.indexOf(option.sizes);
                if (index < 0) {
                    sizes.push(option.sizes);
                } else {
                    sizes.splice(index, 1);
                }

                query.type = "";
                query.sizes = this.sizeList
                    .filter((item) => sizes.indexOf(item.value) >= 0)
                    .map((i) => i.value);
                query.page = 1;
                this.$emit("queryChange", query);
            } else if (option.brands) {
                // 品牌
                let brands = [...this.query.brands];
                let index = brands.indexOf(option.brands);
                if (index < 0) {
                    brands.push(option.brands);
                } else {
                    brands.splice(index, 1);
                }

                query.type = "";
                query.brands = this.brandList
                    .filter((item) => brands.indexOf(item.value) >= 0)
                    .map((i) => i.value);
                query.page = 1;
                this.$emit("queryChange", query);
            }
        },

        getLinkHref (option) {
            let form = {};
            let link = [];

            if (option.classify) {
                // 切换分类
                form.classify = option.classify;
                form.surface = this.query.surface;
                form.brands = this.query.brands;
            } else if (option.surface) {
                // 设计面
                let surface = [...this.query.surface];
                let index = surface.indexOf(option.surface);
                if (index < 0) {
                    surface.push(option.surface);
                } else {
                    surface.splice(index, 1);
                }

                form.classify = this.query.classify;
                form.surface = this.printList
                    .filter((item) => surface.indexOf(item.value) >= 0)
                    .map((i) => i.value);
                form.brands = this.query.brands;
            } else if (option.sizes) {
                // 尺码
                let sizes = [...this.query.sizes];
                let index = sizes.indexOf(option.sizes);
                if (index < 0) {
                    sizes.push(option.sizes);
                } else {
                    sizes.splice(index, 1);
                }

                form.classify = this.query.classify;
                form.surface = this.query.surface;
                form.sizes = this.sizeList
                    .filter((item) => sizes.indexOf(item.value) >= 0)
                    .map((i) => i.value);
            } else if (option.brands) {
                // 品牌
                let brands = [...this.query.brands];
                let index = brands.indexOf(option.brands);
                if (index < 0) {
                    brands.push(option.brands);
                } else {
                    brands.splice(index, 1);
                }

                form.classify = this.query.classify;
                form.surface = this.query.surface;
                form.brands = this.brandList
                    .filter((item) => brands.indexOf(item.value) >= 0)
                    .map((i) => i.value);
            }

            this.query.sort > 1 && (form.sort = this.query.sort);

            Object.keys(form).map((key) => {
                if (/surface|brands|sizes/.test(key)) {
                    form[key].length > 0 &&
                        link.push(key + "=" + form[key].join(","));
                } else {
                    form[key] && link.push(key + "=" + form[key]);
                }
            });
            return link.length > 0 ? "?" + link.join("&") : "";
        },

        // 获取分类是否选中
        getClassifyActive (group) {
            let classify = this.query.classify;
            if (!classify) {
                return false;
            } else if (classify == parseInt(group.classify_id)) {
                return true;
            } else {
                return false;
            }
            // 子集被选中，弹窗中有问题
            // else if (
            //     group.child
            //         .map((i) => parseInt(i.classify_id))
            //         .indexOf(classify) >= 0
            // ) {
            //     return true;
            // }
        },

        // 清空筛选
        clearAll () {
            let query = JSON.parse(JSON.stringify(this.query));
            query.brands = [];
            query.surface = [];
            query.sizes = [];
            query.page = 1;
            this.$emit("queryChange", query);
        },

        //监听滚动
    },
    created () {
        let select = this.classData.filter((i) => this.getClassifyActive(i));
        // this.classOpen = select[0] || this.classData[0]; 设置初始展开
    },
    mounted () {
        // this.queryClassify();
    },
    beforeDestroy () { },
};
</script>

<style lang="scss" scoped>
.product-aside {
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 96px;
    padding-bottom: 24px;
    & > .scroll-box {
        // height: calc(100vh - 120px);
        // padding-right: 20px;
        overflow-y: overlay;
        &::-webkit-scrollbar {
            width: 0px; /*滚动条宽度*/
            height: 2px; /*滚动条高度*/
        }
        & > p {
            height: 32px;
            line-height: 32px;
            font-size: 14px;
            display: flex;
            justify-content: space-between;
            color: #000;
            button {
                border: none;
                padding: 0;
                height: 32px;
                font-size: 14px;

                color: #555;
            }
        }
    }

    dl {
        // height: 32px;
        display: flex;
        flex-direction: column;
        line-height: 32px;
        position: relative;
        overflow: hidden;
        transition: height 0.2s;

        &.product-switch {
            margin: 8px 0 0;
            padding: 8px 0 0;
            border-top: 1px solid #e6e6e6;
            & + .product-switch {
                margin: 0 0 8px;
                padding: 0 0 8px;
                border-bottom: 1px solid #e6e6e6;
                border-top: none;
            }

            &.hide {
                height: 32px !important;
                dt i {
                    transform: rotate(360deg);
                }
            }

            &.active dt {
                color: #ea4c89;
            }
        }

        &.product-checkbox {
            dd {
                display: flex;
                align-items: center;
                position: relative;
                margin-left: 0;

                em {
                    position: absolute;
                    left: 0;
                    top: 50%;
                    transform: translateY(-50%);
                    box-sizing: border-box;
                    width: 16px;
                    height: 16px;
                    box-sizing: border-box;
                    border-radius: 2px;
                    border: 1px solid #9e9e9e;
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    justify-content: center;
                    pointer-events: none;
                    svg {
                        position: absolute;
                        width: 10px;
                        height: 10px;
                        left: 50%;
                        top: 50%;
                        margin-left: -5px;
                        margin-top: -5px;
                        color: #ea4c89;
                        display: none;
                    }
                }

                a {
                    padding-left: 24px;
                }

                &:hover {
                    i {
                        border-color: #ea4c89;
                    }
                }

                &.active {
                    color: #ea4c89;
                    em svg {
                        display: block;
                    }
                }
            }
            a {
                flex: 1;
            }
        }
    }

    dt {
        position: relative;
        font-size: 14px;
        font-family: Roboto-Regular, Roboto;
        font-weight: 400;
        color: #000000;
        i {
            position: absolute;
            width: 32px;
            height: 32px;
            right: 0;
            top: 50%;
            margin-top: -16px;
            text-align: center;
            transform: rotate(180deg);
            font-size: 12px;
            transition: transform 0.2s;
            cursor: pointer;
        }
        &:hover {
            a {
                color: #ea4c89;
            }
            i {
                color: #ea4c89;
            }
        }

        &.active {
            a {
                color: #ea4c89;
            }
            i {
                color: #ea4c89;
            }
        }
    }

    a {
        display: block;
        color: inherit;
    }

    dd {
        margin-left: 10px;
        font-size: 14px;
        font-family: Roboto-Regular, Roboto;
        font-weight: 400;
        color: #555555;
        &:hover {
            color: #ea4c89;
        }

        &.active {
            color: #ea4c89;
        }
    }
}
</style>
